<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">

		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../cssmui/mui.min.css">
		<link href="../../cssmui/mui.picker.min.css" rel="stylesheet" />		
		<script src='../../mui/mui.min.js'></script>
		<script src="../../mui/mui.picker.min.js"></script>
		<script src="../../js/template-web.js"></script>
		<script src="../../js/app.js"></script>
		<script src='../../js/jsondb.js'></script>
		<script src='../../js/map/mydict.js'></script>		
		<script src="../../js/loadpicker.js"></script>
		<script src="../../js/map/dictservice.js"></script>
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			p {
				text-indent: 3px;
				/*缩进*/
			}
			
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			
			.mui-off-canvas-right {
				color: #fff;
			}
			
			.title {
				margin: 35px 15px 10px;
			}
			
			.title+.content {
				margin: 10px 15px 35px;
				color: #bbb;
				text-indent: 1em;
				font-size: 14px;
				line-height: 24px;
			}
			
			input {
				color: #000;
			}
			
			.mui-table-view-cell {
				padding: 10px 10px;
			}
			
			.list-img {
				margin-right: 8px;
				width: 80px;
				height: 84px;
			}
			
			.list-row {
				height: 100px;
			}
			
			.list-row-selected {
				background-color: lemonchiffon;
			}
			
			.mui-bar-popover {
				width: 30%;
			}
		</style>
	</head>

	<body>
		<!--侧滑菜单容器-->
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<!--菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-right">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<h4 style="margin: 10px;">搜索条件</h4>
						<hr>
						<form>
							<div style="margin: 10px;">
								<input type="text" name="gclass" id="gclass" value="" placeholder="分类" />
								<input type="text" name="gname" id="gname" value="" placeholder="名称" />
								<br>
								<span id="offCanvasHide" style="margin-right:10px" class="mui-btn mui-btn-blue mui-pull-left">关闭</span>
								<span id="searchsubmit" style="margin-right:10px" class="mui-btn mui-btn-blue mui-pull-right">查找</span>
							</div>
						</form>
					</div>
				</div>
			</aside>
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
					<a id="offCanvasShow" href="#" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
					<h1 class="mui-title">产品</h1>
				</header>
				<div id="offCanvasContentScroll" style="margin-bottom:50px" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mylist ">
							
							
						</ul>
					</div>
				</div>
				<nav class="mui-bar mui-bar-tab">
					<a class="mui-tab-item" href="new">
						<span class="mui-tab-label">新增</span>
					</a>
					<a class="mui-tab-item" href="scan">
						<span class="mui-tab-label">扫描</span>
					</a>
					<a class="mui-tab-item" href="reload">
						<span class="mui-tab-label">刷新</span>
					</a>
				<!--	<a class="mui-tab-item" href="test">
						<span class="mui-tab-label">测试</span>
					</a>
					<a class="mui-tab-item" href="test2">
						<span class="mui-tab-label">测试2</span>
					</a> -->
				</nav>

				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>

		<script src="../../js/myoffcanvas.js"></script>
		
		<script id="img_tpl" type="text/html">
			<li class="mui-media mui-table-view-cell" did="{{_idkey}}" >
				<a><img  class="mui-pull-left  list-img"  src="{{img}}" >
				<div class="mui-media-body">
				<span class="">[名称]{{gname}} </span>
				<p><span class="">[编号]{{_idkey}}</span></p>
				<p><span class=""> [规格]{{spec}}</span></p>
				<p><span class="">[单重]{{weight}}</span> </p>
				</div>
				</a>
			</li>
		</script>
		<script>
			var _queryRS = null;
			var DICT_gclass = null;
			var _opentype = ''; //工作模式 sel 表示选择模式
			var targetTab = ['goods_info.html', "goods_item.html", '../../plus/barcode_scan.html']
			var _tb_goods = null;

			mui.init();
			mui.ready(function() {

				//window.addEventListener('dragup', function(e) {
				//	e.detail.gesture.preventDefault();
				//});
				//window.addEventListener('dragdown', function(e) {
				//	e.detail.gesture.preventDefault();
				//});

				that = this;
//				var _flag = 0;
//				G('offCanvasContentScroll').addEventListener('scrollend', function(e) {
//					//console.log(_flag + ' ' + e.detail.y + '  ' + e.detail.maxScrollY)
//					_flag = 0;
//					if(e.detail.y <= e.detail.maxScrollY) {
//						_flag = 1
//					}
//				});

				//主界面向左滑动，若菜单未显示，则显示菜单；否则不做任何操作；
//				window.addEventListener("swipeup", function() {
//					//console.log("_flag" + _flag)
//					if(_flag == 1) {
//						pullRefresh()
//						var scroll = mui('#offCanvasContentScroll').scroll()
//						//重新计算布局值，最大滚动的高度等等
//						scroll.reLayout();
//						//滚动到底部
//						scroll.scrollToBottom(100);
//						//console.log('到低了')
//					}
//					//console.log('swipeup')
//				});
				//主界面向右滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
				//				window.addEventListener("swipedown", function() {
				//						console.log("_flag"+_flag)
				//					if(_flag ==1) {
				//							console.log('到顶部了')
				//							refresh()
				//						}
				//					console.log('swipedown')
				//				});
				//数据修改后的自定义事件 比较复杂展示捕捉
				window.addEventListener('bechanged', function(e) {　 //获取参数值
					//console.log('点对点');
					if(e.detail.reload == 1)
						refresh()
				});
			
				G('offCanvasHide').addEventListener('tap', function() {
					offCanvasWrapper.offCanvas('close');
					document.activeElement.blur();
				});
				G('searchsubmit').addEventListener('tap', function(e) {
					//console.log(_flag + ' ' + e.detail.y + '  ' + e.detail.maxScrollY)
					document.activeElement.blur();
					refresh();
					offCanvasWrapper.offCanvas('close');
				});

				mui("nav").on("tap", ".mui-tab-item", function() {
					var eventname = this.getAttribute("href")
					if(eventname == "new") {
						open(targetTab[0])
					} else if(eventname == "scan") {
						open(targetTab[2])
					} else if(eventname == "reload") {
						refresh();
					}
//					} else if(eventname == 'test') {
//						testdict()
//					} else if(eventname == 'test2') {
//						loaddict()
//					}
				});

			});
			mui(".mui-table-view").on("tap", ".mui-table-view-cell", function() {
				// console.log('this.did:'+this.did)
				//名称不能与关键属性 url id extras createNew 有相同		
				var did=this.getAttribute("did");
				console.log(did);
				if(_opentype == 'sel') { //目的是为了选择,点击后立即返回			
					_reload = 'good';
					_return = did; //选中的产品编号传回去					
					mui.back();
				} else { //从菜单或首页进入//目的是为了编辑修改
					data = {
						selectedid:did
					}
					open(targetTab[1], data)
				}
			});

			function loaddict() {
				var tbtyps = new XCDBHelp('tb_types')
				var obj = tbtyps.getObjByID('gclass')
				//log(obj)
				if(obj == null) return;
				DICT_gclass = obj._data
				loadPicker('gclass', DICT_gclass);
			}

			function queryList() {
				var q1 = _FF.getM('gclass').value;
				var q2 = _FF.getV('gname');

				var wheres = {
					"gclass": q1,
					"gname%": q2
				};
				//log(wheres,'aaaa')
				return _tb_goods.where(wheres).getList(new CallObj());
			}

			function CallObj(){
				var table = document.body.querySelector('.mui-table-view');
				table.innerHTML = "";				
				this.each=function(rc,index){
					if (rc.gimg.length>0)
						rc.img = rc.gimg[0].src;
						table.innerHTML += template('img_tpl', rc);
				}
				this.finish=function (){
					mui.toast("已加载完毕");
				}
			}
//			function pullRefresh() {
//				if(_queryRS == null) return;
//				var table = document.body.querySelector('.mui-table-view');
//				table.innerHTML = "";
//				if(_queryRS) {
//					for(var i = 0; i <_queryRS.length; i++) {						
//						k = _queryRS.length - 1-i ;
//						var rc=_queryRS[k];				
//						if (rc.gimg.length>0)
//				 			rc.img = rc.gimg[0].src;
//				 			//console.log(rc.img)
//						table.innerHTML += template('img_tpl', rc);
//					}
//				}
//			
//			
//				mui.toast("已加载完毕")
//		
//			}

			
//刷新
			function refresh() {
				var table = document.body.querySelector('.mui-table-view');
				table.innerHTML = ''
				_queryRS = queryList();
				//console.log(JSON.stringify(_queryRS))
				pullRefresh();
				mui('#offCanvasContentScroll').scroll().scrollTo(0, 0, 100);
				//	console.log('dddd');
			}
//
			function afterPlusReady() {
				var self = _self;
				_opentype = self.target;
				if(_opentype == 'sel') {
					document.body.querySelector('nav').style.display = 'none'
				}
				//提取数据	//if(self.id != null) 
				_tb_goods = new XCDBHelp('tb_goods')
				refresh()
				loaddict();
			
			}

			//配合扫描器 的回调函数
			function scaned(type, result, file) {
				var table = document.body.querySelector('.mui-table-view');
				table.innerHTML = ''
				var wheres = {
					"_idkey": result
				};

				_queryRS = _tb_goods.where(wheres).getList();
				console.log(JSON.stringify(_queryRS))
				pullRefresh();
				mui('#offCanvasContentScroll').scroll().scrollTo(0, 0, 100);
			}
		</script>
	</body>

</html>